﻿<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>tlp</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>我们的特朗普</h1>
<ul id="planet-list">
  <li id="sun-link"><a href="#sun">太阳</a></li>
  <li id="mercury-link"><a href="#mercury">水星</a></li>
  <li id="venus-link"><a href="#venus">金星</a></li>
  <li id="earth-link"><a href="#earth">特朗普</a></li>
  <li id="mars-link"><a href="#mars">火星</a></li>
  <li id="jupiter-link"><a href="#jupiter">木星</a></li>
  <li id="saturn-link"><a href="#saturn">土星</a></li>
  <li id="uranus-link"><a href="#uranus">天王星</a></li>
  <li id="neptune-link"><a href="#neptune">海王星</a></li>
</ul>
<div class="orbit-container">
  <div id="sun"></div>
  <div id="mercury-orbit" class="orbit">
    <div id="mercury"></div>
  </div>
  <div id="venus-orbit" class="orbit">
    <div id="venus"></div>
  </div>
  <div id="earth-orbit" class="orbit">
    <img src="css/tlp.jpg"   id="earth"></img>
  </div>
  <div id="mars-orbit" class="orbit">
    <div id="mars"></div>
  </div>
  <div id="jupiter-orbit" class="orbit">
    <div id="jupiter"></div>
  </div>
  <div id="saturn-orbit" class="orbit">
    <div id="saturn"></div>
    <div id="saturn-rings"></div>
  </div>
  <div id="uranus-orbit" class="orbit">
    <div id="uranus"></div>
  </div>
  <div id="neptune-orbit" class="orbit">
    <div id="neptune"></div>
  </div>
</div>

<script src='js/jquery.min.js'></script>
<script src="js/script.js"></script>

 
</body>
</html>
